<div class="col-sm-2 col-sm-offset-2">
  <div class="list-group">
      <button class="list-group-item"
        v-for="(index, item) in zones"
        v-bind:class="{active: index === selectedZoneIndex}"
        v-on:click="onSelectedZone(index)">
        {{ item.value }}
      </button>
      <button class="list-group-item" v-on:click="onShowAddZoneDialog">
        <span class="glyphicon glyphicon-plus" aria-hidden="true"></span> 添加大板块
      </button>
  </div>

  <div class="list-group">
      <button class="list-group-item"
        v-for="(index, item) in selectedMenus"
        v-bind:class="{active: index === selectedMenuIndex}"
        v-on:click="onSelectedMenu(index)">
        {{ item.value }}
      </button>
      <button class="list-group-item" v-on:click="onShowAddMenuDialog">
        <span class="glyphicon glyphicon-plus" aria-hidden="true"></span> 添加菜单
      </button>
  </div>

  <div class="list-group">
      <button class="list-group-item"
        v-for="(index, item) in selectedSubmenus"
        v-bind:class="{active: index === selectedSubmenuIndex}"
        v-on:click="onSelectedSubmenu(index)">
        {{ item.value }}
      </button>
      <button class="list-group-item" v-on:click="onShowAddSubmenuDialog">
        <span class="glyphicon glyphicon-plus" aria-hidden="true"></span> 添加子菜单
      </button>
  </div>
</div>

<div class="col-sm-6">
  <div class="panel panel-default" v-if="zones[selectedZoneIndex]">
    <div class="panel-heading">
      板块/<strong>{{zones[selectedZoneIndex].value}}</strong>/属性
    </div>
    <div class="panel-body">
      <div class="form-group">
        <label for="zoneId">Id</label>
        <input type="text" class="form-control" id="zoneId" v-cloak disabled v-model="zones[selectedZoneIndex]._id">
      </div>
      <div class="form-group">
        <label for="zoneKey1">Key</label>
        <input type="text" class="form-control" id="zoneKey1" v-cloak v-model="zones[selectedZoneIndex].key">
      </div>
      <div class="form-group">
        <label for="zoneValue1">值</label>
        <input type="text" class="form-control" id="zoneValue1" v-cloak v-model="zones[selectedZoneIndex].value">
      </div>
      <div class="form-group">
        <label for="zoneWeight">权值</label>
        <input type="text" class="form-control" id="zoneWeight" v-cloak v-model="zones[selectedZoneIndex].weight">
      </div>

      <div class="form-group">
        <label>菜单是否有效</label>
        <div>
          <input type="radio" id="zoneEnable1" v-bind:value="true" v-cloak v-model="zones[selectedZoneIndex].enable">
          <label for="zoneEnable1">有效</label>
          <input type="radio" id="zoneEnable2" v-bind:value="false" v-cloak v-model="zones[selectedZoneIndex].enable">
          <label for="zoneEnable2">无效</label>
        </div>
      </div>

      <div class="form-group">
        <label>内容是否要评审</label>
        <div>
          <input type="radio" id="mustReview1" v-bind:value="true" v-cloak v-model="zones[selectedZoneIndex].mustReview">
          <label for="mustReview1">需要评审</label>
          <input type="radio" id="mustReview2" v-bind:value="false" v-cloak v-model="zones[selectedZoneIndex].mustReview">
          <label for="mustReview2">不需要评审</label>
        </div>
      </div>

      <div class="form-group">
        <label>文章是否可以加外链音频附件</label>
        <div>
        <input type="radio" id="audioAttachment1" v-bind:value="true" v-cloak v-model="zones[selectedZoneIndex].audioAttachment">
        <label for="audioAttachment1">可以加音频附件</label>
        <input type="radio" id="audioAttachment1" v-bind:value="false" v-cloak v-model="zones[selectedZoneIndex].audioAttachment">
        <label for="audioAttachment1">不可以加音频附件</label>
        </div>
      </div>

      <div class="form-group">
        <label for="href">板块使用的模板（目前只有三种模板：club, wiki, job）</label>
        <input type="text" class="form-control" id="template" v-cloak v-model="zones[selectedZoneIndex].template">
      </div>

<!--       <div class="form-group">
        <label for="href">板块链接  (ex: club?zoneId=xxxxx)</label>
        <input type="text" class="form-control" id="href" v-cloak v-model="zones[selectedZoneIndex].href">
      </div> -->
      <div class="form-group">
        <label for="icon">板块ICON (ex: <a target="_blank" href="http://fontawesome.dashgame.com/">http://fontawesome.dashgame.com/</a>)</label>
        <input type="text" class="form-control" id="icon" v-cloak v-model="zones[selectedZoneIndex].icon">
      </div>

      <div class="form-group">
        <label for="icon">创建内容的文案 (ex: 发帖)</label>
        <input type="text" class="form-control" id="icon" v-cloak v-model="zones[selectedZoneIndex].createText">
      </div>

      <button class="btn btn-primary" v-on:click="onUpdateZone">更新</button>
      <button class="btn btn-danger" v-on:click="onDeleteZone">删除</button>
    </div>
  </div>
  <div class="panel panel-default" v-if="selectedMenus[selectedMenuIndex]">
    <div class="panel-heading">
      菜单/<strong>{{selectedMenus[selectedMenuIndex].value}}</strong>/属性
    </div>
    <div class="panel-body">
      <div class="form-group">
        <label for="menuKey">Key</label>
        <input type="text" class="form-control" id="menuKey" v-cloak v-model="selectedMenus[selectedMenuIndex].key">
      </div>
      <div class="form-group">
        <label for="menuValue">值</label>
        <input type="text" class="form-control" id="menuValue" v-cloak v-model="selectedMenus[selectedMenuIndex].value">
      </div>
      <div class="form-group">
        <label for="menuWeight">权值</label>
        <input type="text" class="form-control" id="menuWeight" v-cloak v-model="selectedMenus[selectedMenuIndex].weight">
      </div>

      <div class="form-group">
        <label>是否有效</label>
        <div>
        <input type="radio" id="menuEnable1" v-bind:value="true" v-cloak v-model="selectedMenus[selectedMenuIndex].enable">
        <label for="menuEnable1">有效</label>
        <input type="radio" id="menuEnable2" v-bind:value="false" v-cloak v-model="selectedMenus[selectedMenuIndex].enable">
        <label for="menuEnable2">无效</label>
        </div>
      </div>

      <button class="btn btn-primary" v-on:click="onUpdateMenu">更新</button>
      <button class="btn btn-danger" v-on:click="onDeleteMenu">删除</button>
    </div>
  </div>

  <div class="panel panel-default" v-if="selectedSubmenus[selectedSubmenuIndex]">
    <div class="panel-heading">
      子菜单/<strong>{{selectedSubmenus[selectedSubmenuIndex].value}}</strong>/属性
    </div>
    <div class="panel-body">
      <div class="form-group">
        <label for="zoneKey">Key</label>
        <input type="text" class="form-control" id="zoneKey" v-cloak v-model="selectedSubmenus[selectedSubmenuIndex].key">
      </div>
      <div class="form-group">
        <label for="zoneValue">值</label>
        <input type="text" class="form-control" id="zoneValue" v-cloak v-model="selectedSubmenus[selectedSubmenuIndex].value">
      </div>
      <div class="form-group">
        <label for="zoneWeight">权值</label>
        <input type="text" class="form-control" id="zoneWeight" v-cloak v-model="selectedSubmenus[selectedSubmenuIndex].weight">
      </div>

      <div class="form-group">
        <label>是否有效</label>
        <div>
        <input type="radio" id="submenuEnable1" v-bind:value="true" v-cloak v-model="selectedSubmenus[selectedSubmenuIndex].enable">
        <label for="submenuEnable1">有效</label>
        <input type="radio" id="submenuEnable2" v-bind:value="false" v-cloak v-model="selectedSubmenus[selectedSubmenuIndex].enable">
        <label for="submenuEnable2">无效</label>
        </div>
      </div>

      <button class="btn btn-primary" v-on:click="onUpdateSubmenu">更新</button>
      <button class="btn btn-danger" v-on:click="onDeleteSubmenu">删除</button>
    </div>
  </div>
</div>

<!-- 添加大板块dialog -->
<div class="modal fade add-zone-dialog" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-sm">
    <div class="modal-content">
      <div class="modal-header">
        添加大板块
      </div>
      <div class="modal-body">
        <div class='form-group'>
          <div class="input-group">
            <div class="input-group-addon">Key</div>
            <input class='form-control' id='zoneKey' name='zoneKey' size='30' type='text' v-model="zoneKey"/>
          </div>
        </div>
        <div class='form-group'>
          <div class="input-group">
            <div class="input-group-addon">Value</div>
            <input class='form-control' id='zoneValue' name='zoneValue' size='30' type='text' v-model="zoneValue"/>
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
        <button class="btn btn-primary" v-on:click="onAddZone">添加</button>
      </div>
    </div>
  </div>
</div>

<!-- 添加menu dialog -->
<div class="modal fade add-menu-dialog" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-sm">
    <div class="modal-content">
      <div class="modal-header">
        添加Menu
      </div>
      <div class="modal-body">
        <div class='form-group'>
          <div class="input-group">
            <div class="input-group-addon">Key</div>
            <input class='form-control' id='menuKey' name='menuKey' size='30' type='text' v-model="menuKey" placeholder=""/>
          </div>
        </div>
        <div class='form-group'>
          <div class="input-group">
            <div class="input-group-addon">Value</div>
            <input class='form-control' id='menuValue' name='menuValue' size='30' type='text' v-model="menuValue" placeholder=""/>
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
        <button class="btn btn-primary" v-on:click="onAddMenu">添加</button>
      </div>
    </div>
  </div>
</div>

<!-- 添加submenu dialog -->
<div class="modal fade add-submenu-dialog" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-sm">
    <div class="modal-content">
      <div class="modal-header">
        添加子菜单
      </div>
      <div class="modal-body">
        <div class='form-group'>
          <div class="input-group">
            <div class="input-group-addon">Key</div>
            <input class='form-control' id='submenuKey' name='submenuKey' size='30' type='text' v-model="submenuKey" placeholder=""/>
          </div>
        </div>
        <div class='form-group'>
          <div class="input-group">
            <div class="input-group-addon">Value</div>
            <input class='form-control' id='submenuValue' name='submenuValue' size='30' type='text' v-model="submenuValue" placeholder=""/>
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
        <button class="btn btn-primary" v-on:click="onAddSubmenu">添加</button>
      </div>
    </div>
  </div>
</div>
<script>
  var appId = $('[name=app-id]').val();
  var pagePrefix = '<%= apiPrefix.page %>';
  var dataPrefix = '<%= apiPrefix.data %>';
  var menusUtil = new MenusUtil(pagePrefix, dataPrefix);
  var vue = new Vue({
    el: '#app',
    data: {
      // zones
      zones: [],
      selectedZoneIndex: 0,
      selectedMenuIndex: 0,
      selectedSubmenuIndex: 0,
      selectedMenus: [],
      selectedSubmenus: [],
      zoneKey: '',
      zoneValue: '',
      menuKey: '',
      menuValue: '',
      submenuKey: '',
      submenuValue: '',
      // others
      errorMsg: '',
      successMsg: ''
    },
    methods: {
      getZones: function() {
        menusUtil.getFullZones(true, function(err, docs) {
          if (err) vue.errorMsg = err;
          else {
            docs.forEach(function(item) {
              item.active = false;
            });

            vue.zones = docs;
            vue.onSelectedZone(0);
          }
        });
      },
      onSelectedZone: function (index) {
        vue.selectedZoneIndex = index;

        if(vue.zones[index]) {
          vue.selectedMenus = vue.zones[index].menus || [];
        }

        vue.onSelectedMenu(0);
        vue.onSelectedSubmenu(0);
      },
      onSelectedMenu: function (index) {
        vue.selectedMenuIndex = index;

        if(vue.selectedMenus[index]) {
          vue.selectedSubmenus = vue.selectedMenus[vue.selectedMenuIndex].submenus || [];
        }

        vue.onSelectedSubmenu(0);
      },
      onSelectedSubmenu: function (index) {
        vue.selectedSubmenuIndex = index;
      },
      onUpdateZone: function () {
        menusUtil.updateZone(vue.zones[vue.selectedZoneIndex], function(err, doc) {
          vue.resetMessage();
          if(err) vue.errorMsg = err;
          else {
            vue.successMsg = doc;
          }
        })
      },
      onUpdateMenu: function() {
        menusUtil.updateMenu(vue.selectedMenus[vue.selectedMenuIndex], function(err, doc) {
          vue.resetMessage();
          if (err) vue.errorMsg = err;
          else vue.successMsg = doc;
        });
      },
      onUpdateSubmenu: function() {
        menusUtil.updateSubmenu(vue.selectedSubmenus[vue.selectedSubmenuIndex], function(err, doc) {
          vue.resetMessage();
          if (err) vue.errorMsg = err;
          else vue.successMsg = doc;
        });
      },
      onDeleteZone: function() {
        menusUtil.deleteZone(vue.zones[vue.selectedZoneIndex], function(err, doc) {
          if (err) vue.errorMsg = err;
          else {
            vue.resetMessage();
            vue.zones.$remove(vue.zones[vue.selectedZoneIndex]);
            vue.onSelectedZone(0);
          }
        });
      },
      onDeleteMenu: function() {
        menusUtil.deleteMenu(vue.selectedMenus[vue.selectedMenuIndex], function(err, doc) {
          vue.resetMessage();
          if (err) vue.errorMsg = err;
          else {
            vue.selectedMenus.$remove(vue.selectedMenus[vue.selectedMenuIndex]);
            vue.onSelectedMenu(0);
          }
        });
      },
      onDeleteSubmenu: function() {
        menusUtil.deleteSubmenu(vue.selectedSubmenus[vue.selectedSubmenuIndex], function(err, doc) {
          vue.resetMessage();
          if (err) vue.errorMsg = err;
          else {
            vue.selectedSubmenus.$remove(vue.selectedSubmenus[vue.selectedSubmenuIndex]);
            vue.onSelectedSubmenu(0);
          }
        });
      },
      onShowAddZoneDialog: function() {
        $('.add-zone-dialog').modal('show');
      },
      onAddZone: function() {
        $('.add-zone-dialog').modal('hide');
        menusUtil.addZone(vue.zoneKey, vue.zoneValue, function(err, doc) {
          vue.resetMessage();
          if (err) vue.errorMsg = err;
          else {
            vue.successMsg = 'success'
            doc.menus = [];
            vue.zones.push(doc);
            vue.zonekey = '';
            vue.zoneValue = '';
          }
        });
      },
      onShowAddMenuDialog: function(id) {
        $('.add-menu-dialog').modal('show');
      },
      onAddMenu: function() {
        $('.add-menu-dialog').modal('hide');
        if (vue.zones.length < 1 || !vue.zones[vue.selectedZoneIndex]) return alert('请先添加板块');
        menusUtil.addMenu(vue.zones[vue.selectedZoneIndex]._id, vue.menuKey, vue.menuValue, function(err, doc) {
          vue.resetMessage();
          if (err) vue.errorMsg = err;
          else {
            vue.menuKey = '';
            vue.menuValue = '';
            doc.submenus = [];
            vue.zones[vue.selectedZoneIndex].menus = [];
            vue.zones[vue.selectedZoneIndex].menus.push(doc);
            vue.selectedMenus.push(doc);
          }
        });
      },
      onShowAddSubmenuDialog: function(index, id) {
        $('.add-submenu-dialog').modal('show');
      },
      onAddSubmenu: function() {
        $('.add-submenu-dialog').modal('hide');
        if (vue.selectedMenus.length < 1 || !vue.selectedMenus[vue.selectedMenuIndex]) return alert('请先添加菜单');
        $.post(dataPrefix + '/submenu/add', {appId:appId, _csrf: $('#_csrf').val(), parentId: vue.selectedMenus[vue.selectedMenuIndex]._id, key: vue.submenuKey, value: vue.submenuValue}, function (result) {
          vue.resetMessage();
          if (result.err) {
            vue.errorMsg = result.err;
            return;
          }

          vue.zones[vue.selectedZoneIndex].menus[vue.selectedMenuIndex].submenus.push(result.data);
          vue.selectedMenus[vue.selectedMenuIndex].submenus.push(result.data);
          vue.selectedSubmenus.push(result.data);
          vue.submenuKey='';
          vue.submenuValue='';
        });
      },
      resetMessage: function() {
        vue.errorMsg = '';
        vue.successMsg = '';
      }
    }
  });

  vue.getZones();
  // vue.getMenus();
</script>
